<template>
     <div class="list1" v-if="param.tablestatus ==1" v-loading="loading">
        <el-table ref="selectTable" :data="list1">
                            <el-table-column prop="articleId" min-width="120" label="id"></el-table-column>

                            <el-table-column prop="title" min-width="120" label="标题"></el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                        <el-button  @click=" $router.push({path:'/articleEdit/'+3, query:scope.row})" text type="primary">编辑</el-button>
                    <el-divider direction="vertical" />
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                           layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>


</template>
<script>
    
export default {
    data() {
        return {
            list1:[],

            param: {
                pageNumber: 1,
                pageSize: 10,
                tablestatus: 1,
            },            
            loading: false,
            total: 0,
        }
    },

    created() {
    this.getList()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
     getList(pageNumber) {
            this.loading = true;
            let res;
            if (pageNumber) {
              this.param.pageNumber = pageNumber;
            }
            this.param.type=3;
            this.$api.articlelist(this.param).then(res => {
            console.log('res====', res)
            if (res) {
                let url = 'list'+this.param.tablestatus
                this[url] = res.records
                this.total = res.total;
            }
            })
            this.loading = false;
        },


    }

}


</script>
<style lang="scss" scoped>
.list1{
    background-color: #fff;
    .list1_head1{
        width: 40px;height: 40px;
        border-radius: 50%;
    }
    .list1_operate1{
        width: 100%;
        display: flex;
        justify-content: center;
        .list1_operate1_line1{margin: auto 10px;}
    }
    .list1_page1{
        height: 70px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list1_page1_title1{
            font-size: 10px;color: #A4A4A4;
        }
    }
}

</style>